@import 'element-plus/theme-chalk/dark/css-vars.css';

html.dark {
  // 变量
  --el-text-color-primary: #d0d0d0;
  --el-color-primary-dark-2: var(--el-color-primary-light-2) !important;
  --el-color-primary-light-9: var(--el-color-primary-darken-8) !important;
  --el-color-primary-light-8: var(--el-color-primary-darken-7) !important;
  --el-color-primary-light-7: var(--el-color-primary-darken-6) !important;
  --el-color-primary-light-5: var(--el-color-primary-darken-4) !important;
  --el-color-primary-light-3: var(--el-color-primary-darken-3) !important;
  --dark-font-color: rgba(255, 255, 255, 0.85);
  --dark-header-color: #2d2e2e;

  // 背景
  #app {
    background-color: var(--el-bg-color);
  }
  p,
  span {
    color: var(--el-text-color-primary) !important;
  }
  .table-title {
    background-color: var(--dark-header-color);
    color: var(--dark-font-color);
  }
  // 字体
  h1,
  h2,
  h3,
  h4,
  h5 {
    color: var(--el-text-color-primary);
  }
  // 组件
  .el-popper.is-dark .el-text {
    color: #606266 !important;
  }
  .el-header,
  .el-footer {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
  }
  .el-main {
    background-color: var(--el-bg-color);
  }
  .el-aside {
    background-color: var(--el-bg-color-overlay);
    border-color: var(--el-border-color-light);
    box-shadow: 0 0 5px 0 var(--el-color-primary-darken-5);
  }
  .el-table .el-table__body-wrapper {
    background-color: var(--el-bg-color);
  }
  .el-table th.is-sortable:hover {
    background-color: #111;
  }
  .el-table th {
    background-color: var(--dark-header-color) !important;
    color: var(--dark-font-color);
  }
  // menu
  .el-menu-item.is-active {
    color: var(--el-color-white) !important;
    background-color: var(--el-color-primary) !important;
    .el-icon, span {
      color: var(--el-color-white) !important;
    }
    &:hover {
      background-color: var(--el-color-primary) !important;
      .el-icon, span {
        color: var(--el-color-white) !important;
      }
    }
  }
  .el-menu-item,
  .el-sub-menu__title {
    color: var(--el-text-color-regular);
    &:hover {
      color: var(--el-color-white) !important;
      background-color: var(--el-color-primary-light-7) !important;
      .el-icon {
        color: var(--el-color-white) !important;
      }
    }
  }
  .el-menu--collapse .el-menu-item:hover,
  .el-menu--collapse .el-sub-menu:hover {
    svg,
    .el-icon {
      color: var(--el-color-white);
    }
  }

  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    span {
      color: var(--el-color-white) !important;
    }
  }

  .el-page-header__content {
    color: var(--el-text-color-primary);
  }
  // Wrapper
  .page-title {
    color: var(--dark-font-color);
  }
  // wangEditor
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: var(--el-color-white);
  --w-e-toolbar-bg-color: var(--el-bg-color-overlay);
  --w-e-toolbar-color: var(--el-color-white);
}
